import React from "react";
import { connect } from "react-redux";
import { useHistory } from "react-router-dom";
import Weather from "../components/weather";
import { FullScreenContainer } from "$components";
import IPOverview from "../components/ip-overview";
import IPChart from "../components/ip-chart";
import IPDataCenter from "../components/ip-data-center";
import IPCore from "../components/ip-core";
import DepartmentRank from "../components/department-rank";
import IPChain from "../components/ip-chain";
import "../style.less";

function HomePage(props) {
  const history = useHistory();

  // 进入后台管理页面
  const goToManagement = () => {
    history.push("/management");
  };

  return (
    <FullScreenContainer fullScreen={true}>
      <div className="ip-dashboard">
        {/* 头部标题 */}
        <header className="ip-header">
          <div className="ip-weather">
            <Weather />
          </div>
          <div className="ip-title">江西飞尚科技知识产权监测大屏</div>
          <div className="ip-admin-button">
            <button className="enter-admin-btn" onClick={goToManagement}>
              管理后台
            </button>
          </div>
        </header>

        {/* 主体内容 */}
        <div className="ip-content">
          {/* 左侧面板 */}
          <div className="left-panel">
            <div className="panel-item">
              <IPOverview />
            </div>
            <div className="panel-item">
              <IPChart />
            </div>
            <div className="panel-item">
              <DepartmentRank title="部门提交交底书量排名" />
            </div>
          </div>

          {/* 中间面板 */}
          <div className="center-panel">
            <div className="panel-item">
              <IPDataCenter />
            </div>
          </div>

          {/* 右侧面板 */}
          <div className="right-panel">
            <div className="panel-item">
              <IPCore />
            </div>
            <div className="panel-item">
              <IPChain />
            </div>
            <div className="panel-item">
              <DepartmentRank title="部门国家受理量排名" type="national" />
            </div>
          </div>
        </div>
        <div className="ip-footer"></div>
      </div>
    </FullScreenContainer>
  );
}

function mapStateToProps(state) {
  const { global } = state;
  return {
    clientHeight: global.clientHeight,
  };
}

export default connect(mapStateToProps)(HomePage);
